<template>
  <div>
    <div v-transfer-dom>
      <popup v-model="showToolBar" @on-hide="onhideBar" @on-show="onshowBar">
        <group v-show="menu[1].selected" title="本章進度">
          <cell :border-intent="false" primary="content" style="background:#eee;height:100px">
            <progress-bar
              v-model="progress"
              :min="0"
              :max="100"
              :canChangeProgress="false"
              :random="random"
            />
          </cell>
        </group>
        <group v-show="menu[2].selected" title="亮度">
          <!-- <cell :border-intent="false" primary="content" style="background:#eee;height:50px">
            <progress-bar
              v-model="brightness"
              :min="0"
              :max="100"
              :dotWidth="4"
              :canChangeProgress="true"
              :random="random"
            />
          </cell>-->
          <checker
            v-model="selectedColor"
            default-item-class="demo5-item"
            selected-item-class="demo5-item-selected"
            class="selecter-box"
            style
          >
            <checker-item
              v-for="(color,index) in $config.themes"
              :key="index"
              :value="index"
              :style="'background:'+color.color"
            ></checker-item>
          </checker>
        </group>
        <group v-show="menu[3].selected" title="字體大小">
          <cell primary="content" style="background:#eee;height:100px">
            <progress-bar
              v-model="fontSize"
              :min="0"
              :max="100"
              :step="25"
              :dotWidth="4"
              :canChangeProgress="true"
              :random="random"
            />
          </cell>
        </group>

        <grid :show-lr-borders="false" :show-vertical-dividers="false">
          <grid-item v-for="(item,index) in menu" :key="index" @on-item-click="menuClick(index)">
            <img slot="icon" :src="item.selected ? item.icon_s : item.icon">
          </grid-item>
        </grid>
      </popup>
    </div>
  </div>
</template>

<script>
import {
  TransferDom,
  Popup,
  Group,
  Cell,
  Grid,
  GridItem,
  Checker,
  CheckerItem,
  Divider
} from "vux";

import ProgressBar from "./progressBar.vue";

export default {
  directives: {
    TransferDom
  },
  components: {
    TransferDom,
    Popup,
    Group,
    Cell,
    Grid,
    GridItem,
    Checker,
    CheckerItem,
    Divider,
    ProgressBar
  },
  props: {
    isShow: {
      type: Number,
      required: false
    },
    progress: {
      type: Number,
      required: false,
      default: 0
    },
    fontSize: {
      type: Number,
      required: false,
      default: 18
    },
    selectedColor: {
      ype: Number,
      required: false,
      default: 0
    }
  },
  watch: {
    isShow: {
      handler() {
        this.showToolBar = true;
      }
    },
    selectedColor: {
      handler() {
        this.$emit("onThemeSelect", this.selectedColor);
      }
    },
    fontSize: {
      handler() {
        //根据设置获取字体大小
        //let size = this.$config.fontsizes[this.fontSize].size;
        this.$emit("onChangeFontsize", this.fontSize);
      }
    },
    brightness: {
      handler() {
        //调用系统设置亮度方法
        if (this.isNative) {
          //设置系统亮度
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      random: 0,
      isNative: false,
      showToast: null,
      showToolBar: false,
      showToolBar2: false,
      brightness: 5,
      // selectedColor: 0,
      settingCell: {
        setFont: false
      },
      menu: [
        {
          text: "目录",
          icon: require("@/assets/image/icon/catalog.png"),
          icon_s: require("@/assets/image/icon/catalog_s.png"),
          selected: false
        },
        {
          text: "进度",
          icon: require("@/assets/image/icon/progress.png"),
          icon_s: require("@/assets/image/icon/progress_s.png"),
          selected: false
        },
        {
          text: "亮度",
          icon: require("@/assets/image/icon/theme.png"),
          icon_s: require("@/assets/image/icon/theme_s.png"),
          selected: false
        },
        {
          text: "字体",
          icon: require("@/assets/image/icon/font.png"),
          icon_s: require("@/assets/image/icon/font_s.png"),
          selected: false
        }
      ]
    };
  },
  methods: {
    log(str) {
      console.log(str);
    },

    doHide() {
      this.showToolBar = false;
      if (this.isNative) {
        //隐藏客户端头部，
        native.hideNavigation();
      }
    },

    onhideBar() {
      this.menu.forEach(item => {
        item.selected = false;
      });
      if (this.isNative) {
        //隐藏客户端头部，
        native.hideNavigation();
      }
    },
    onshowBar() {
      this.random = new Date().getTime();
      if (this.isNative) {
        //隐藏客户端头部，
        native.showNavigation();
      }
    },
    menuClick(index) {
      this.menu.forEach(item => {
        item.selected = false;
      });
      this.menu[index].selected = true;

      switch (index) {
        case 0:
          //目录
          this.$emit("openCatalog", {});
          break;
        case 1:
          //进度
          break;
        case 2:
          //亮度

          break;
        case 3:
          //字体
          break;

        default:
          break;
      }
    }
  },
  mounted() {
    //檢查是否客戶端環境
    this.isNative = this.$utils.chackNative();
  },
  created() {}
};
</script>

<style>
.selecter-box {
  background: #eee;
  height: 150px;
  text-align: center;
}
.demo5-item {
  margin-top: 25px;
  width: 20vw;
  height: 50px;
  line-height: 26px;
  text-align: center;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-right: 20px;
  line-height: 50px;
}
.demo5-item-selected {
  border: 2px solid #000;
}
</style>
